<div>
  <v-row no-gutters>
    <v-col cols="12" md="11">
      <v-tabs class="pagestab" v-model="active_tab" ref="pagestab" hide-slider v-if="fromRoutePage === undefined">
        <v-tab :disabled="readonly || editMode">Upload data</v-tab>
        <v-tab :disabled="readonly || editMode">External data source</v-tab>
        <v-tab-item :eager="true">
          <v-form v-model="validLocal" ref="form">
            <v-file-input label="File input" show-size @change="fileChange" :rules="defaultRule"
              v-if="!readonly && loadedFile == null"> </v-file-input>
            <v-row v-if="(readonly || editMode) && loadedFile != null" no-gutters class="read-only-local-file">
              <v-col cols="12" md="6" sm="12">
                File: {{ loadedFile.name }}
                <v-btn icon @click="editFile" v-if="editMode">
                  <v-icon color="primary">
                    mdi-pencil
                  </v-icon>
                </v-btn>
                <v-btn icon :href="loadedFile.link">
                  <v-icon color="primary">
                    mdi-download
                  </v-icon>
                </v-btn>
              </v-col>
            </v-row>
            <v-text-field label="File type" v-model="filetype" :rules="defaultRule" :readonly="readonly">
            </v-text-field>
          </v-form>
          <v-btn color="primary" @click.native="previousPage" class="prev-page-button">Back</v-btn>
          <v-btn color="primary" @click.native="nextPage" class="prev-page-button" :disabled="!readonly && !validLocal">
            Next</v-btn>
        </v-tab-item>
        <v-tab-item :eager="true">
          <div v-if="!hideBackendConnections"
            style="height: min-content; border-style: dashed; margin-top: 20px; padding: 10px; color: #239b7e; margin-bottom: 30px;">
            <v-row v-if="!readonly" no-gutters>
              <v-col cols="12" md="6" sm="12">
                <add-backend-connection-dialog ref="addBackendConnectionDialog"
                  @backendConnectionSaved="backendConnectionSaved">
                </add-backend-connection-dialog>
                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details>
                </v-text-field>
              </v-col>
            </v-row>
            <v-row v-if="!readonly" no-gutters>
              <v-col cols="12" md="11" sm="12">
                <v-data-table v-model="selected" :headers="headers" :items="backendConnections" :items-per-page="5"
                  :search="search" show-select :single-select=true item-key="id"
                  no-data-text="No backend connections available">
                </v-data-table>
              </v-col>
            </v-row>
            <v-row v-if="readonly" no-gutters>
              <v-col cols="12" md="11" sm="12">
                <v-data-table :headers="headers" :items="selected" :items-per-page="5" :search="search"
                  :single-select=true item-key="id" no-data-text="No backend connections set">
                </v-data-table>
              </v-col>
            </v-row>
          </div>
          <v-form v-model="validRemote" ref="formRemote">
            <v-text-field label="File type" v-model="filetype" :rules="defaultRule" :readonly="readonly">
            </v-text-field>
          </v-form>
          <v-btn color="primary" @click.native="previousPage" class="prev-page-button">Back</v-btn>
          <v-btn color="primary" @click.native="nextPage" class="prev-page-button"
            :disabled="!readonly && !allValidRemote">
            Next</v-btn>
        </v-tab-item>
      </v-tabs>
      <v-row v-if="fromRoutePage !== undefined">
        <v-col>
          <v-form v-model="validRoute" ref="formRoute">
            <v-text-field label="File type" v-model="filetype" :rules="defaultRule" :readonly="readonly">
            </v-text-field>
          </v-form>
          <v-btn color="primary" @click.native="previousPage" class="prev-page-button">Back</v-btn>
          <v-btn color="primary" @click.native="nextPage" class="prev-page-button" :disabled="!validRoute">
            Next</v-btn>
        </v-col>
      </v-row>

    </v-col>
  </v-row>
</div>